<template>
  <el-dialog title="表格配置"
             :visible.sync="visible"
             width="800px"
             @close="handleClose"
             :close-on-click-modal="false">

    <el-button type="primary" @click="addRow" size="small" style="margin-bottom: 10px">新增</el-button>
    <table ref="configTable" class="form-item-config">
      <thead>
      <tr>
        <th style="width: 50px">序号</th>
        <th>标题</th>
        <th>字段</th>
        <th>对齐</th>
        <th></th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item, $index) in data.columns" :key="$index"

      >
        <td draggable="true"
            @dragstart="onRowDragStart($event, item, $index)"
            @dragend="onRowDragEnd"
            @dragover.prevent="onRowDragOver($event, item)"
            @dragleave="onRowDragLeave"
            @drop="onRowDrop($event, $index)"
            style="cursor: move"

        >
          {{($index+1)}}
        </td>
        <td>
          <el-input type="text" v-model="item.name"/>
        </td>
        <td>
          <el-input type="text" v-model="item.code"/>
        </td>
        <td>
          <el-select v-model="item.align" size="mini">
            <el-option value="left" label="左对齐"></el-option>
            <el-option value="center" label="居中"></el-option>
            <el-option value="right" label="右对齐"></el-option>
          </el-select>
        </td>
        <td>
          <el-link type="primary" :underline="false" @click="delFormLabel($index)"><i class="el-icon-delete"></i>
          </el-link>
        </td>
      </tr>
      </tbody>
    </table>

    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
      <el-button @click="handleClose">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
  export default {
    props: {
      options: {
        type: Object
      }
    },
    data() {
      return {
        visible: true,
        startOffsetX: 0,
        startOffsetY: 0,
        startIndex: 0,
        dropPlace: null,

        data: {
          columns: []
        },


      }
    },
    beforeMount() {
      console.log('this.options', this.options);
      this.data.columns = this.options.columns.map(item => {
        const col = Object.assign({}, item);
        if (!col.align) {
          col.align = 'left';
        }
        return col;
      });
    },
    methods: {
      addRow() {
        this.data.columns.push({
          code: '',
          name: '',
          align: 'left'
        })
      },

      onRowDragStart(ev, row, index) {
        this.startOffsetX = ev.offsetX;
        this.startOffsetY = ev.offsetY;
        this.startIndex = index;
        ev.dataTransfer.setData('row', JSON.stringify(row));
      },
      onRowDragEnd(ev) {
        ev.dataTransfer.clearData();
      },
      //行拖放后
      onRowDrop(ev, index) {
        this.clearDragLine();
        console.log(index, this.dropPlace);
        const row = JSON.parse(ev.dataTransfer.getData('row'));

        //判断在上面还是下面
        if (this.dropPlace === 'bottom') {
          index = index + 1;
        }
        if (index > this.startIndex) {//先插后删
          this.data.columns.splice(index, 0, row);
          this.data.columns.splice(this.startIndex, 1);
        } else { //先删后插
          this.data.columns.splice(this.startIndex, 1);
          this.data.columns.splice(index, 0, row);
        }

      },
      clearDragLine() {
        const allTd = this.$refs.configTable.querySelectorAll('td');
        for (let i = 0; i < allTd.length; i++) {
          allTd[i].style.borderBottom = '1px solid #ccc';
          allTd[i].style.borderTop = '1px solid #ccc';
        }
      },
      onRowDragLeave() {
        this.clearDragLine();
      },
      onRowDragOver(ev, row) {
        // console.log('over', ev, row);
        const x = ev.offsetX;
        const y = ev.offsetY;
        const tr = ev.target.parentElement;

        this.clearDragLine();

        const borderStyle = '2px solid #1890ff';
        const tds = tr.querySelectorAll('td');
        if (y < this.startOffsetY) {
          this.dropPlace = 'top';
          for (let i = 0; i < tds.length; i++) {
            tds[i].style.borderTop = borderStyle;
          }
        }
        if (y > this.startOffsetY) {
          this.dropPlace = 'bottom';
          for (let i = 0; i < tds.length; i++) {
            tds[i].style.borderBottom = borderStyle;
          }
        }


      },
      delFormLabel(index) {
        this.data.columns.splice(index, 1);
      },
      handleClose() {
        this.$emit('close')
      },
      handleSubmit() {
        if (this.data.columns.some(item => {
          return !item.code || !item.name;
        })) {
          this.$message.error('字段和标题不能为空，请填写完整');
          return false;
        }
        this.$emit('success', this.data.columns)
      },
    }
  }
</script>
<style lang="scss" scoped>
  .form-item-config {
    position: relative;
    width: 100%;
    border: 1px solid #ccc;
    border-collapse: collapse;
    border-spacing: 0;

    th, td {
      border: 1px solid #ccc;
      text-align: center;
      padding: 5px;

      input {
        width: 100%;
      }
    }

  }
</style>
